<!-- StartMenu.vue -->
<template>
    <div class="launcher" @click="toggle">
      <img src="https://www.jsdelivr.com/assets/6bb3d36f60bf34801fb712ee06a72b4cdac3a0d8/img/landing/new/built-for-prod/6.svg" width="48"/>
    </div>
  
    <Transition :name="transitionName">
      <div v-if="visible" class="menu" :class="dockPos">
        <!-- 应用网格 or 列表 -->
        <div class="grid">
          <div v-for="app in apps" :key="app.name" class="cell">
            <img :src="app.icon" width="64"/>
            <span>{{ app.name }}</span>
          </div>
        </div>
      </div>
    </Transition>
  </template>
  
  <script setup>
  import { computed, ref } from 'vue';
  const props = defineProps({ dockPos: String });
  
  const visible = ref(false);
  function toggle() { visible.value = !visible.value; }
  
  const transitionName = computed(() =>
    props.dockPos === 'bottom' ? 'slide-up' :
    props.dockPos === 'left'   ? 'slide-right' : 'slide-left');
  
  // 示例应用
  const apps = [
    { name: 'Firefox', icon: '/icons/firefox.png' },
    { name: 'VS Code', icon: '/icons/code.png' }
  ];
  </script>
  
  <style scoped>
  .menu {
    position: fixed;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 20px;
  }
  .menu.bottom {
    left: 50%; bottom: 90px; transform: translateX(-50%);
  }
  .menu.left {
    top: 50%; left: 90px; transform: translateY(-50%);
  }
  .menu.right {
    top: 50%; right: 90px; transform: translateY(-50%);
  }
  
  .slide-up-enter-active, .slide-up-leave-active {
    transition: all .3s ease;
  }
  .slide-up-enter-from { opacity: 0; transform: translate(-50%, 30px); }
  .slide-up-leave-to   { opacity: 0; transform: translate(-50%, 30px); }
  
  .slide-right-enter-active, .slide-right-leave-active {
    transition: all .3s ease;
  }
  .slide-right-enter-from { opacity: 0; transform: translate(-30px, -50%); }
  .slide-right-leave-to   { opacity: 0; transform: translate(-30px, -50%); }
  
  .slide-left-enter-active, .slide-left-leave-active {
    transition: all .3s ease;
  }
  .slide-left-enter-from { opacity: 0; transform: translate(30px, -50%); }
  .slide-left-leave-to   { opacity: 0; transform: translate(30px, -50%); }
  </style>